<template>
  <div class="content">
    <div class="first"> <span class="bule"></span> 新增管理员</div>
    <div class="box">
      <div class="pass">编辑管理员信息</div>
      <div class="confirm">
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="form.userName" placeholder="请输入内容" style="width: 250px;"></el-input>
          </el-form-item>
          <el-form-item label="账号" prop="name">
            <el-input v-model="form.name" placeholder="请输入内容" style="width: 250px;"></el-input>
          </el-form-item>
          <el-form-item label="选择角色">
            <el-select v-model="form.region" placeholder="请选择角色" style="width: 250px;">
              <el-option label="超级管理员" value="超级管理员"></el-option>
              <el-option label="医生" value="医生"></el-option>
              <el-option label="护士" value="护士"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号码" prop="phoneNumber">
            <el-input v-model="form.phoneNumber" placeholder="请输入内容" style="width: 250px;"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input v-model="form.pass" placeholder="请输入内容" style="width: 250px;"></el-input>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch v-model="form.isShow" @change="show"></el-switch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" :disabled="!form.isShow">确认</el-button>
            <el-button @click="resetForm('ruleForm')" type="primary" plain>取消</el-button>
          </el-form-item>
        </el-form>

      </div>
    </div>
  </div>
</template> 
<script>
import { getManegerList } from '@/api/syssetting/index.js'
export default {
  data() {
    return {
      rules: {
        userName: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: "请输入账户", trigger: "blur" },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        phoneNumber: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        pass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },

      form: {
        phoneNumber: '',
        username: '',
        name: '',
        word: "",
        region: '',
        date1: '',
        date2: '',
        isShow: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  methods: {
    show() {

    },
    resetForm(ruleForm) {
      this.$router.push({ path: 'admin' })
    },
    submitForm(submit) {
      setTimeout(() => {
        this.$router.push({ path: 'admin' })
      }, 500)
    }
  }
}
</script>
  
<style scoped>
.content {
  width: 921px;
  min-height: 333px;

}

.bule {
  vertical-align: 3px;
  display: inline-block;
  width: 20px;
  height: 10px;
  border-radius: 999px;
  background: #006EFF;
  margin-right: 8px;
}

.first {
  font-size: 20px;
  padding-top: 13px;
  padding-bottom: 22px;

}

.box {
  width: 100%;
  /* height: 274px; */
  border: 1px solid #ccc;
  border-radius: 5px;
  /* background-color: aqua; */
}

.pass {
  height: 40px;
  font-size: 10px;
  color: #006EFF;
  line-height: 40px;
  box-sizing: border-box;
  padding-left: 15px;
  background-color: rgba(242, 242, 242, 1);
  color: bl;
}

.confirm {
  box-sizing: border-box;
  padding-top: 10px;
}

el-input {
  width: 250px;
}
</style>